<script setup lang="ts">
import type { MediaType } from '~/types'
import { MediaTypeEnum } from '~/enums/const'

const props = withDefaults(
  defineProps<{
    type?: MediaType
    title?: string
  }>(),
  {}
)
const emits = defineEmits<{
  headerClick: [value?: unknown]
}>()
const router = useRouter()
// 传入的header头部值
const calculateTitle = computed<string>(() => {
  return `最新${MediaTypeEnum[props.type as MediaType]}`
})

function headerClick(val?: MediaType) {
  console.log(val)
  if (val) {
    router.push(`/channel/${val}`)
  } else {
    emits('headerClick')
  }
}

const headerSlot = !!useSlots().header
</script>

<template>
  <article>
    <div v-if="!!type || headerSlot" py3 flex="~ justify-between">
      <h1 border-rd-20 px4 py-1 gradient-f97316-ffb800-270>
        <span v-if="!!type">
          {{ calculateTitle }}
        </span>
        <slot v-else name="header" />
      </h1>
      <div flex="~ items-center" cursor-pointer transition @click="headerClick(type)">
        <span>{{ !!type ? '更多' : '换一换' }}</span>
        <div v-if="!!type" i-ep:arrow-right-bold ma />
        <div v-else i-ep:refresh-right ma />
      </div>
    </div>

    <ul grid="~ cols-minmax-8rem gap2 lg:cols-minmax-15rem lg:gap5" :class="headerSlot || !!type ? 'pt2.5 pb4' : 'py4'">
      <slot />
    </ul>
  </article>
</template>
